<!DOCTYPE html>
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
    <base href="/">
    <meta http-equiv="Content-Type" content="text/html; charset=utf-8"/>

    <title>Good4Touch</title>
    <script src="js/jquery-1.7.min.js" type="text/javascript" charset="utf-8"></script>

    <script src="http://ajax.googleapis.com/ajax/libs/jqueryui/1.8/jquery-ui.min.js"></script>

    <style>
        body{
            background-color: #ADD8C7;
        }
        div.box{
            background-color: white;
            height: 300px;
            width: 400px;
            position: relative;
            overflow: hidden;
        }
        .page {
            width: 400px;
            float: left;
            /*bottom: 0;*/
        }
        .title{
            background-color: red;
            font-size: 18px;
            width: 400px;
            float: left;
        }
        .content{
            background-color: #FBB829;
            font-size: 14px;
            width: 400px;
            float: left;
        }

        .in{

            width: 2000px;
        }
        .rul{
            margin-left: 0;
        }
    </style>

</head>

<body>
    <div class="container">
        <input type="button" name="next" value="next" id="next">
        <div class="box">
            <div class="in">
                <div class="title rul">
                    Title is here
                </div>
                <div class="title">
                    Title is here2
                </div>
                <div class="title">
                    Title is here3
                </div><div class="title">
                    Title is here3
                </div><div class="title">
                    Title is here3
                </div>
            </div>
            <div style="clear: both;"></div>
            <div class="in">
                <div class="content rul">
                    We follow a whole-istic approach based on User Centered Design and User Experience Principles while
                    combining branding, strategy and social media marketing.
                </div>
                <div class="content">
                    We follow a whole-istic approach based on User Centered Design and User Experience Principles while
                                      combining branding, strategy and social media marketing.
                </div><div class="content">
                We follow a whole-istic approach based on User Centered Design and User Experience Principles while
                                  combining branding, strategy and social media marketing.
                </div><div class="content">
                We follow a whole-istic approach based on User Centered Design and User Experience Principles while
                                  combining branding, strategy and social media marketing.
                </div><div class="content">
                We follow a whole-istic approach based on User Centered Design and User Experience Principles while
                                  combining branding, strategy and social media marketing.
                </div>
            </div>


        </div>


    </div>

<script>
    $(document).ready(function() {
      $('#next').click(function () {
          var $lefty = $('.rul').first();


          $lefty.animate({
              marginLeft:parseInt($lefty.css('margin-left'), 10) == 0 ?
                      -400 :
                      parseInt($lefty.css('margin-left'), 10) - 400
          }, 600, function () {
              $(this).removeClass('rul').next().addClass('rul');
              var txt = $($('.rul')[1]);
              txt.animate({
                  marginLeft:parseInt(txt.css('margin-left'), 10) == 0 ?
                          -400 :
                          parseInt(txt.css('margin-left'), 10) - 400
              }, 600, function () {
                  $(this).removeClass('rul').next().addClass('rul');
              });
          });



      });
    });
</script>

</body>


</html>